<template>
  <el-dialog
    v-model="dialogShow"
    title="新增考试批次"
    width="40%"
    center
    :close-on-click-modal="false"
    draggable
  >
    <el-form :model="formState" :rules="rules" ref="formRef">
      <el-form-item label="批次号" prop="code" :label-width="formLabelWidth">
        <el-input
          v-model="formState.code"
          placeholder="请输入批次号"
        ></el-input>
      </el-form-item>
      <el-form-item label="考试名称" prop="name" :label-width="formLabelWidth">
        <el-input
          v-model="formState.name"
          placeholder="请输入考试名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="年级" prop="grade" :label-width="formLabelWidth">
        <el-select
          v-model="formState.grade"
          placeholder="请选择年级"
          width="100%"
        >
          <el-option
            v-for="[value, label] in Object.entries(gradeMap)"
            :key="value"
            :label="label"
            :value="value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="入学年"
        prop="startYear"
        :label-width="formLabelWidth"
      >
        <el-date-picker
          v-model="formState.startYear"
          type="year"
          placeholder="请选择入学年"
          :disabled-date="disabledDate"
          value-format="YYYY"
        />
      </el-form-item>
      <el-form-item label="状态" prop="status" :label-width="formLabelWidth">
        <el-select v-model="formState.status" placeholder="选择状态">
          <el-option
            v-for="[value, label] in Object.entries(batchStatus)"
            :key="value"
            :label="label"
            :value="value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="考试日期" prop="date" :label-width="formLabelWidth">
        <el-date-picker
          v-model="formState.date"
          type="date"
          placeholder="请选择考试日期"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="满分值" prop="point" :label-width="formLabelWidth">
        <el-input v-model="formState.point" placeholder="请输入满分值" />
      </el-form-item>
      <el-form-item
        label="发布时间"
        prop="pubTime"
        :label-width="formLabelWidth"
      >
        <el-date-picker
          v-model="formState.pubTime"
          type="datetime"
          placeholder="请选择考试发布时间"
          value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="submitForm"> 确 定 </el-button>
        <el-button @click="handleClose"> 取 消 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { addBatch } from "@/Api/pc";
import { showMessage } from "@/utils";
import { gradeMap, batchStatus } from "@/constant";
const formRef = ref();

const rules = {
  code: [
    {
      required: true,
      message: "请输入考试批次号",
      trigger: "blur",
    },
  ],
  name: [
    {
      required: true,
      message: "请输入考试名称",
      trigger: "blur",
    },
  ],
  grade: [
    {
      required: true,
      message: "请选择年级",
      trigger: "blur",
    },
  ],
  startYear: [
    {
      required: true,
      message: "请选择入学年",
      trigger: "blur",
    },
  ],
  status: [
    {
      required: true,
      message: "请选择状态",
      trigger: "blur",
    },
  ],
  date: [
    {
      type: "date",
      required: true,
      message: "请选择考试日期",
      trigger: "change",
    },
  ],
  point: [
    {
      required: true,
      message: "请输入满分值",
      trigger: "blur",
    },
  ],
  pubTime: [
    {
      required: true,
      message: "请选择发布日期",
      trigger: "change",
    },
  ],
};

const formState = reactive({
  code: "",
  name: "",
  grade: "",
  startYear: "",
  status: "",
  date: "",
  point: "",
  pubTime: "",
});
const formLabelWidth = 150;
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  echoData: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const emits = defineEmits(["update:show", "updateList"]);
const dialogShow = computed({
  get: () => props.show,
  set: (val) => {
    emits("update:show", val);
  },
});
const disabledDate = (time) => {
  const year = time.getFullYear();
  // 禁用小于2000年和大于2099年的年份
  return year < 2000 || year > 2099;
};
const handleClose = () => {
  emits("update:show", false);
};
const submitForm = async () => {
  await formRef.value?.validate(async (valid) => {
    if (valid) {
      const params = {
        ...formState,
        grade:
          formState.grade +
          formState.startYear.substring(formState.startYear.length - 2),
      };
      delete params.startYear;
      const response = await addBatch(params);
      const { code, msg } = response;
      if (code == 0) {
        showMessage("success", `${msg}`);
        handleClose();
        emits("updateList");
      }
    }
  });
};

watch(
  () => props.show,
  (val) => {
    if (!val) {
      formRef.value?.resetFields();
    }
  }
);
</script>
<style lang="scss" scoped></style>
